<template>
<!-- 申请列表 -->
  <div class="member-container">
    <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    <ul class="member-list">
      <li class="list-item" v-for="(item, i) of memberList" :key="i" @click="onMemberClicked(item)">
        <div class="icon">
          <!-- <img src="@/assets/images/my.png" alt="" class="placeholder"> -->
          <img :src="item.headUrl" alt="">
        </div>
        <div class="info ellipsis">
          {{ item.nickname }}
        </div>
        <!-- <div class="action">
          <div class="agree button" @click="onAgree(item)">
            同意
          </div>
          <div class="reject button" @click="onReject(item)">
            拒绝
          </div>
        </div> -->
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Webim } from '@/utils/types';
import { Response } from '@/api/bean';
import { DIALOGUE, ImClient, MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<GroupMembers>({
  mixins: [MessageMixin],
})
export default class GroupMembers extends Vue {
  @userModule.State("groupMembers") groupMembers: any;
  @userModule.Action("saveCurrentUserFN") saveCurrentUserFN: any;
  @userModule.Action("saveGroupMembersFN") saveGroupMembersFN: any;

  private memberList: Array<any> = [];

  private eventList: Array<string> = [
    "$getMemberList",
  ];

  protected mounted() {
    this.initEvents(this.eventList);
    this.memberList = this.groupMembers.slice();
    this.sendMessage(MsgTypeKV.getGroupInfoByGroupId, {
      groupId: sessionStorage.getItem('groupId'),
    });
    this.sendMessage(MsgTypeKV.getMemberList, {
      groupId: sessionStorage.getItem('groupId'),
    });
  }

  /**
   * 跳转到用户信息
   */
  private onMemberClicked(item: any) {
    this.saveCurrentUserFN(item);
    this.$router.push({
      name: 'MemberInfo',
    });
  }

  /**
   * 获取
   */
  private $getMemberList(data: any) {
    if (data.result === 0) {
      this.memberList = data.infoList;
      this.saveGroupMembersFN(this.memberList);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000,
      }).show();
    }
  }

}
</script>

<style lang="stylus" scoped>
.list-item
  width 64px
  height 84px
  display flex
  justify-content space-between
  flex-direction column
  .icon
    flex-basis 80%
    height 80%
    position relative
    img 
      width 90% 
      height 90%
      border-radius 8px
    .placeholder
      position absolute
      top 0
      left 0
      z-index 0
  .info
    flex-basis 20%
    height 20%
    font-size 13px
    text-align center

.member-list
  display flex
  justify-content flex-start
  align-items flex-start
  padding-top 24px
  flex-wrap wrap

.member-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  padding 8px

</style>

